<template>
  <div class="container">
    <div class="handle-button">
      <label><input type="checkbox" v-model="editable" />启用拖放</label>

      <button type="button" @click="restoreDefault">恢复默认</button>

      <div>{{ list }}</div>
      <div>{{ list1 }}</div>
      <div>{{ list2 }}</div>
    </div>
    <div class="drag-view">
      <div class="top">
        <draggable
          tag="span"
          v-model="list"
          v-bind="dragOptions"
          :move="onMove"
          @start="isDragging = true"
          @end="isDragging = false"
        >
          <transition-group
            type="transition"
            class="list-group"
            :name="'flip-list'"
            tag="ul"
          >
            <li v-for="element in list" :key="element.order">
              <div style="line-height: 100px">8888888888</div>
              <component :is="element.name"></component>
            </li>
          </transition-group>
        </draggable>
      </div>
      <div class="bottom">
        <div class="left">
          <draggable
            tag="span"
            v-model="list1"
            v-bind="dragOptions"
            :move="onMove"
          >
            <transition-group name="no" class="list-group" tag="ul">
              <li v-for="element in list1" :key="element.order">
                <component :is="element.name"></component>
              </li>
            </transition-group>
          </draggable>
        </div>
        <div class="right">
          <draggable
            tag="span"
            v-model="list2"
            v-bind="dragOptions"
            :move="onMove"
          >
            <transition-group name="no" class="list-group" tag="ul">
              <li v-for="element in list2" :key="element.order">
                <component :is="element.name"></component>
              </li>
            </transition-group>
          </draggable>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import draggable from "vuedraggable";
import viewOne from "../components/one.vue";
import viewTwo from "../components/two.vue";
import viewThree from "../components/three.vue";
import viewFour from "../components/four.vue";
export default {
  components: {
    draggable,
    viewOne,
    viewTwo,
    viewThree,
    viewFour,
  },
  computed: {
    dragOptions() {
      return {
        animation: 10,
        group: "description",
        disabled: !this.editable,
        ghostClass: "ghost",
        forceFallback: true,
      };
    },
  },
  data() {
    return {
      list: [{ name: "viewOne", order: 1, fixed: false }],
      list1: [
        { name: "viewTwo", order: 2, fixed: false },
        { name: "viewThree", order: 3, fixed: false },
      ],
      list2: [{ name: "viewFour", order: 4, fixed: false }],
      editable: true,
      isDragging: false,
      delayedDragging: false,
    };
  },
  methods: {
    orderList() {
      this.list = this.list.sort((one, two) => {
        return one.order - two.order;
      });
    },
    restoreDefault() {
      this.list = [{ name: "viewOne", order: 1, fixed: false }];
      (this.list1 = [
        { name: "viewTwo", order: 2, fixed: false },
        { name: "viewThree", order: 3, fixed: false },
      ]),
        (this.list2 = [{ name: "viewFour", order: 4, fixed: false }]);
    },
    onMove({ relatedContext, draggedContext }) {
      const relatedElement = relatedContext.element;
      const draggedElement = draggedContext.element;
      console.log(1, relatedContext);
      console.log(2, draggedContext);
      return (
        (!relatedElement || !relatedElement.fixed) && !draggedElement.fixed
      );
    },
  },

  watch: {
    isDragging(newValue) {
      if (newValue) {
        this.delayedDragging = true;
        return;
      }
      this.$nextTick(() => {
        this.delayedDragging = false;
      });
    },
  },
};
</script>

<style lang='scss' type='text/scss' scoped>
.handle-button {
  padding: 10px;

  button {
    margin-left: 20px;
  }
}
.flip-list-move {
  transition: transform 0.5s;
}

.no-move {
  transition: transform 0s;
}

.ghost {
  opacity: 0.5;
  background: #c8ebfb;
}

.list-group {
  min-height: 300px;
}

.list-group-item {
  cursor: move;
  display: block;
  padding: 10px 15px;
  margin-bottom: -1px;
  background-color: #fff;
  border: 1px solid #ddd;
}

.list-group-item i {
  cursor: pointer;
}

.drag-view {
  width: 100%;

  .top {
    width: 100%;
    min-height: 300px;
    border: 4px solid yellow;
  }

  .bottom {
    width: 100%;
    display: flex;

    .left {
      width: 60%;
      border: 1px solid red;
    }

    .right {
      width: 40%;
      border: 1px solid green;
    }
  }
}
.user-drag {
  -webkit-user-drag: none;
}
.drag-handle {
  cursor: move;
  height: 40px;
  line-height: 40px;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  padding: 0 20px;
  background: #6cf;
}
</style>